<template>
    <n-grid :x-gap="12" :y-gap="8" :cols="3">
        <n-gi v-for="(item, index) in todos">
            <n-card hoverable class="class-card" :class="ChoiceColor(index)">
                <n-h3 prefix="bar">
                    <n-text type="primary">
                        {{ item.name }}
                    </n-text>
                </n-h3>
                <p>
                    <n-text>
                        教师：{{ item.teacherName }} ， 邮箱：{{
                            item.teacherEmail
                        }}
                    </n-text>
                </p>
                <n-text>
                    {{ item.description }}
                </n-text>
            </n-card>
        </n-gi>
    </n-grid>
</template>

<script setup>
import { ref, defineComponent, h } from "vue";
import { NGrid, NGi, NCard, NH3, NText } from "naive-ui";

const todos = [
    {
        name: "RUOK",
        description: "Do you link MI 4 ?",
        teacherName: "陈聪",
        teacherEmail: "10086@qq.com",
        code: "61c2c500b1e689b517401fd6",
    },
    {
        name: "RUOK",
        description: "Do you link MI 4 ?",
        teacherName: "陈聪",
        teacherEmail: "10086@qq.com",
        code: "61c2c500b1e689b517401fd6",
    },
    {
        name: "RUOK",
        description: "Do you link MI 4 ?",
        teacherName: "陈聪",
        teacherEmail: "10086@qq.com",
        code: "61c2c500b1e689b517401fd6",
    },
];

function ChoiceColor(index) {
    if (index % 2 === 1) {
        return "green";
    } else {
        return "light-green";
    }
}
</script>

<style>
.class-card {
    height: 160px;
}

.light-green {
    background-color: rgba(0, 128, 0, 0.12);
}
.green {
    background-color: rgba(0, 128, 0, 0.24);
}

.red {
    background-color: rgba(255, 179, 167, 1);
}
</style>

<script>
export default defineComponent({
    name: "MyClass",
    methods: {},
});
</script>
